<template>
 <todoHeader/>
 <todoInput @add="handleAddTodoItem"/>
 <todoList/>
 <footer/>
</template>
<script>
import todoHeader from './components/todoHeader.vue'
import todoInput from './components/todoInput.vue' 
import todoList from './components/todoList.vue' 
import footer from './components/footer.vue' 
const todos = [
  {id: 1, title: '复习 JavaScript', completed: false},
  {id: 2, title: '复习 HTML', completed: true},
  {id: 3, title: '复习 CSS', completed: false},
  {id: 4, title: '预习 Vue', completed: false},
]
let NEXT_ID = 5

export default {
    name: "App",
    components: {
      todoHeader,
      todoInput,
      todoList,
      footer,
    },
    data() {
    return {
      todos,
    }
  },
  methods: {
    /**
     * 处理添加新待办事项
     */
    handleAddTodoItem(title) {
      console.log('app:', this.$bus)
      this.todos.push({
        id: NEXT_ID++,
        title,
        completed: false,
      })
    },
    /**
     * 删除待办事项
     * @param {*} id 
     */
    removeTodoItem(id) {
      this.todos = this.todos.filter(todo => todo.id !== id)
    },
    /**
     * 修改待办事项状态
     */
    toggleTodoItem(id) {
      this.todos = this.todos.map(todo => {
        if (todo.id === id) {
          todo.completed = !todo.completed
        }
        return todo
      })
    },
    created() {+
    // 注册事件监听，用于接收待删除待办事项的 id，然后实现删除业务
    this.$bus.on('remove', this.removeTodoItem)
    // 注册事件监听，用于接收待修改状态的待办事项 id，实现修改状态业务
    this.$bus.on('toggle', this.toggleTodoItem)
  },
  },


  };
</script>
<style scoped>
*{
  margin:0;
  padding:0
}

</style>